<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color - 生成颜色</title>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <h2>F12打开控制台查看数据，效果更佳</h2>
    <div class="box">
        展示内容:<div id="content"></div>
    </div>
    <script>
        let Random = Mock.Random;
        //生成数据
        list = Mock.mock({
            color: Random.color(),
            // => "#3538B2"
            hex: Random.hex(),
            // => "#3538B2"
            rgb: Random.rgb(),
            // => "rgb(242, 198, 121)"
            rgba: Random.rgba(),
            // => "rgba(242, 198, 121, 0.13)"
            hsl: Random.hsl(),
            // => "hsl(345, 82, 71)"
        })

        //展示数据
        console.table(list)
        x = document.getElementById("content");
        //将对象转为JSON
        x.innerHTML = JSON.stringify(list, null, '<br />');

        //将对象转为数组
        let arr = [];
        for (let item in list) {
            arr.push(list[item]);
        }

        //循环输出
        arr.forEach((item, index) => {
            x.innerHTML += "<div class='list_box' style='background-color: " + item + ";'>" + index + "</div>";
        });

    </script>

</body>

</html>